<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/*练习：1 圆形  2 正三角形
			思路1  宽高与边框倒角一致
			思路2  div#triangle 
			       css中：抓到div    [斜线]
			              左边框：50像素实线红色
						  右边框：50像素实线黄色
						  下边框：50像素实线黑色
				注意：先别加宽高  transparent 透明色
				*/
			div#circle{
				width: 400px ;
				height: 400px ;
				border:1px solid red;
				border-radius: 50%;
				/* 边框阴影  box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px hotpink inset;
			}
			div#triangle{
				width: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid black;
				/*两行：倒三角，蓝色，透明度  .3*/
			}
			div#dao{
				width: 0; 
				border:50px solid transparent;
				border-top-color: rgba(0,0,225,.3);
			}
			/*outline 边框轮廓  只针对input  元素*/
			input{
				outline :1px solid red;
			}
			/*实际应用：通配选择器  去掉轮廓
			{outline：0；}
			*/
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle">	</div>
		<div id="dao"></div>
		边框：<input type="text">
	</body>
</html>